<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

            .box{
                width: 655px;
                height: 325px;
                border: 1px solid rebeccapurple;
                display: grid;
                grid-template-columns: repeat(auto-fill,100px);
                grid-template-rows: repeat(auto-fill,100px);
                padding: 5px;
                margin:  100px auto;
                grid-gap: 10px 10px;

                grid-template-areas:    'a a a a b b' 
                                        'a a a a c c'
                                        'd d o p c c';
                                    
            
            }
            img{
                width: 100%;
                height: 100%;
            }
            .box div:nth-child(1){
                grid-area: a;
            }
            .box div:nth-child(2){
                grid-area:b;
            }
            .box div:nth-child(3){
                grid-area:c;
            }
            .box div:nth-child(4){
                grid-area:d;
            }


    </style>


</head>
<body>
    
    <div class="box">

        <div>
           <img src="./image/1.webp" alt="">
        </div>
        <div>
            <img src="./image/2.webp" alt="">
        </div>
        <div>
            <img src="./image/3.webp" alt="">
        </div>
        <div>
            <img src="./image/2.webp" alt="">
        </div>
        <div>
            <img src="./image/1.webp" alt="">
        </div>
        <div>
            <img src="./image/2.webp" alt="">
        </div>
    </div>

</body>
</html>